<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="utf-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
	<meta http-equiv="Cache-Control" content="no-siteapp" />
	<link rel="Bookmark" href="/favicon.ico" >
	<link rel="Shortcut Icon" href="/favicon.ico" />

	<link rel="stylesheet" type="text/css" href="../../static/h-ui/css/H-ui.min.css" th:href="@{/h-ui/css/H-ui.min.css}"/>
	<link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/css/H-ui.admin.css" th:href="@{/h-ui.admin/css/H-ui.admin.css}"/>
	<link rel="stylesheet" type="text/css" href="../../static/lib/Hui-iconfont/1.0.8/iconfont.css" th:href="@{/lib/Hui-iconfont/1.0.8/iconfont.css}"/>
	<link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/skin/default/skin.css" id="skin" th:href="@{/h-ui.admin/skin/default/skin.css}"/>
	<link rel="stylesheet" type="text/css" href="../../static/h-ui.admin/css/style.css" th:href="@{/h-ui.admin/css/style.css}"/>
	<link rel="stylesheet" href="../../static/Semantic-UI-master/dist/semantic.min.css" th:href="@{/Semantic-UI-master/dist/semantic.min.css}">
	<link rel="stylesheet" href="../../static/css/custom.css" th:href="@{/css/custom.css}">

	<!--/meta 作为公共模版分离出去-->

	<link href="lib/webuploader/0.1.5/webuploader.css" th:href="@{lib/webuploader/0.1.5/webuploader.css}" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="page-container">
	<form method="post" class="form form-horizontal" id="form-article-add">
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>用户名：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="" placeholder="输入用户名称" id="coursename" name="">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">发布者：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="sytest" th:value="${session.admin.adminName}" placeholder="" id="author" name="">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">发布者身份：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<input type="text" class="input-text" value="管理员" placeholder="" id="role" name="">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>课程简介：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<textarea name="" cols="" rows="" id="courseDetails" class="textarea"  placeholder="说点什么...最少输入10个字符,但是尽量不要超过250个字哦" datatype="*10-100" dragonfly="true" nullmsg="备注不能为空！"></textarea>

			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>封面上传：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<button href="javascript:void(0);" onclick="openFile();" type="button" class="ui button teal mini">+上传图片</button>
			</div>
		</div>

		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">上传预览：</label>
			<div class="formControls col-xs-8 col-sm-9" id="yulan">
				<img src="../../static/imges/01.jpg" class="image-size-course">
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2">上传的图片路径：</label>
			<div class="formControls col-xs-8 col-sm-9" id="imageurl">
				<p>当前未上传图片</p>
			</div>
		</div>
		<div class="row cl">
			<label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>开始上传：</label>
			<div class="formControls col-xs-8 col-sm-9">
				<button class="ui button teal mini" type="button" disabled="disabled" id="upimages">开始上传</button>
			</div>
		</div>

		<div class="row cl">
			<div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
				<button onClick="course_save_submit();" class="btn btn-primary radius" type="button"><i class="Hui-iconfont">&#xe632;</i> 保存并提交</button>
				<button onClick="layer_close();" class="btn btn-default radius" type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
			</div>
		</div>
	</form>
	<form id="uploadForm" name="uploadForm">
		<input hidden type="file" name="imageData" id="imageData" class="imageData" onchange="showImg(this)">
	</form>
</div>

<!--_footer 作为公共模版分离出去-->
<script src="../../static/js/jquery-1.12.4.min.js" th:src="@{/js/jquery-1.12.4.min.js}"></script>
<script src="../../static/js/jquery-ui.min.js" th:src="@{/js/jquery-ui.min.js}"></script>
<script src="../../static/Semantic-UI-master/dist/semantic.min.js" th:src="@{/Semantic-UI-master/dist/semantic.min.js}"></script>
<script src="../../static/js/sy.min.js" th:src="@{/js/sy.min.js}"></script>
<script type="text/javascript" src="../../static/lib/layer/2.4/layer.js" th:src="@{/lib/layer/2.4/layer.js}"></script>
<script type="text/javascript" src="../../static/h-ui/js/H-ui.min.js" th:src="@{/h-ui/js/H-ui.min.js}"></script>
<script type="text/javascript" src="../../static/h-ui.admin/js/H-ui.admin.js" th:src="@{/h-ui.admin/js/H-ui.admin.js}"></script> <!--/_footer 作为公共模版分离出去-->

<!--请在下方写此页面业务相关的脚本-->
<script type="text/javascript" src="../../static/lib/My97DatePicker/4.8/WdatePicker.js" th:src="@{/lib/My97DatePicker/4.8/WdatePicker.js}"></script>
<script type="text/javascript" src="../../static/lib/jquery.validation/1.14.0/jquery.validate.js" th:src="@{/lib/jquery.validation/1.14.0/jquery.validate.js}"></script>
<script type="text/javascript" src="../../static/lib/jquery.validation/1.14.0/validate-methods.js" th:src="@{/lib/jquery.validation/1.14.0/validate-methods.js}"></script>
<script type="text/javascript" src="../../static/lib/jquery.validation/1.14.0/messages_zh.js" th:src="@{/lib/jquery.validation/1.14.0/messages_zh.js}"></script>
<script type="text/javascript" src="../../static/lib/webuploader/0.1.5/webuploader.min.js" th:src="@{/lib/webuploader/0.1.5/webuploader.min.js}"></script>
<script type="text/javascript" src="../../static/lib/ueditor/1.4.3/ueditor.config.js" th:src="@{/lib/ueditor/1.4.3/ueditor.config.js}"></script>
<script type="text/javascript" src="../../static/lib/ueditor/1.4.3/ueditor.all.min.js" th:src="@{/lib/ueditor/1.4.3/ueditor.all.min.js}"> </script>
<script type="text/javascript" src="../../static/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js" th:src="@{/lib/ueditor/1.4.3/lang/zh-cn/zh-cn.js}"></script>
<script type="text/javascript">
	function openFile() {
		$("#imageData").trigger("click");
	}
	var urlstr = '';
	//图片预览
	function showImg(obj){
		var patter = /(\.*.jpg$)|(\.*.png$)|(\.*.gif$)|(\.*.bmp$)|(\.*.JPG$)|(\.*.PNG$)|(\.*.GIF$)|(\.*.BMP$)/;
		if(!patter.test($(obj).val())){
			alert('系统不支持图片的格式');
		}else {
			var file = obj.files[0];
			var l = window.URL.createObjectURL(file)
			$("#upimages").removeAttr("disabled");
			$('#yulan').html("<img class='image-size-course' src='"+l+"'>");
		}
	}
	//图片上传到oss
	$("#upimages").click(function () {
		var formdata = new FormData(document.getElementById("uploadForm"));
		$.ajax({
			type:'POST',
			url:'/sy/syadmin/uploadFile',
			data: formdata,
			processData:false,
			contentType:false,
			async: false,
			cache: true,
			success:function(data){
				if(data==="null"){
					alert("没有获取到上传文件")
				}
				else {
					urlstr=data;
					$("#imageurl").html('<p id="imgurl">'+data+'</p>')
				}

			},
			error:function(){
				alert("出错了")
			}

		})
	})

	//    表单提交
	function course_save_submit() {
		const  coursename= $("#coursename").val();
		const  author= $("#author").val();
		const  role= 0;
		const  courseDetails= $("#courseDetails").val();
		const  imgurl= urlstr;
		if(coursename.length==0 || author.length==0 || courseDetails.length==0){
			alert("不能留空哦！")
			return;
		}
		if(imgurl===''){
			alert("课程封面还没有上传")
			return;
		}
		if(courseDetails.length<10){
			alert("课程简介最少输入10个字符")
			return;
		}
		data = {
			courseName: coursename,
			courseAuthor: author,
			courseAuid: role,
			courseDetails: courseDetails,
			courseImge: imgurl
		};
		$.ajax({
			type: 'post',
			cache: false,
			url: '/sy/course/savecourse',
			data: JSON.stringify(data),
			contentType: 'application/json;charset:utf-8',
			success: function(data){
				window.location.replace("/sy/course/courseview")
			},
			error: function (message) {
				alert("出错了")
			}
		})
	}

</script>
</body>
</html>